<template>
  <div class="">
    <el-row :gutter="5" align="middle">
        <el-col :span="1">
          <el-tag size="mini" effect="plain" style="margin-top: 36PX;">{{ formatTag(count) }}</el-tag>
        </el-col>
        <el-col :span="21">
          <div>
            <el-slider 
                class="self_slider" 
                v-model="count" 
                :max="countMax" 
                :min="countMin" 
                :marks="guideMarks(countMin, countMax)" 
                :show-tooltip="false"
                @change="changeCurrentTime">
            </el-slider>
            <!-- <div class="my-slider__tooltip" :style="style">
              <el-tag type="info" class="my-slider__tooltip-wrapper">{{ formatTag(count) }}</el-tag>
            </div> -->
          </div>
        </el-col>
        <el-col :span="1">
          <el-tag size="mini" effect="plain" style="margin-top: 36PX; margin-left: 15px">{{ formatTag(count) }}</el-tag>
        </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" justify="left">
        <el-col :span="3">
          <a-date-picker
            placeholder="选择日期" 
            format="YYYY-MM-DD"
            :locale="dateLocale"
            :disabledDate="disabledDate"  
            style="width:120px"
            @change="handleDateChange($event)"/>
        </el-col>
        <el-col :span="8">
          <el-time-picker
            class="time-select"
            size="mini"
            v-model="startTime"
            :picker-options="{
              selectableRange: ['21:00:00 - 23:00:00','09:00:00 - 12:00:00', '13:30:00 - 15:00:00']
            }"
            placeholder="选择时间"
            @change="startTimeHandler">
          </el-time-picker>
          <el-time-picker
            class="time-select"
            size="mini"
            v-model="endTime"
            :picker-options="{
              selectableRange: ['21:00:00 - 23:00:00','09:00:00 - 12:00:00', '13:30:00 - 15:00:00']
            }"
            placeholder="选择时间"
            @change="endTimeHandler">
          </el-time-picker>
          
        </el-col>
        
        <el-col :span="5">
          <el-button size="mini" @click="timeBackword"><font-awesome-icon :icon="['fas', 'backward']" /></el-button>
          <el-button size="mini" @click="startPlayOrPause"><font-awesome-icon :icon="btnPlayOrPause" /></el-button>
          <el-button size="mini" @click="timeForward"><font-awesome-icon :icon="['fas', 'forward']" /></el-button>
        </el-col>
        <el-col :span="4">
          <label>倍速：</label>
          <el-select size="mini" v-model="selectSpeed" placeholder="请选择" style="width:80px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
          </el-select>
        </el-col>
    </el-row>
  </div>
    
</template>

<script>
  import eventBus from '../utils/eventBus'
  import dateLocale from 'ant-design-vue/lib/date-picker/locale/zh_CN'
  import * as moment from 'moment'
  import { categories } from '../utils/categories'
  export default {
    name: 'sliderBar',
    data() {
      return {
        dateLocale,
        count: 0,
        countMin: 0,
        countMax: 480,
        startTime: undefined,
        endTime: undefined,
        categories: categories,
        options: [
            {value: 2000, label: '0.5'},
            {value: 1000, label: '1'},
            {value: 100, label: '10'},
            {value: 5, label: '200'},
        ],
        btnPlayOrPause: ['fas', 'play'],
        timer: null,
        time: ['21:00', '22:00', '09:00 23:00', '10:00', '11:00' ,'12:00', '13:00', '14:00', '15:00']
      }
    },
    props: {
      speed: {
        type: Number,
        default: 1000,
        description: '播放速度'
      },
      tradDate: {
        type: String,
        default: '20201108',
        description: '交易日'
      },
      pulse: {
        type: Boolean,
        default: false
      },
      timeStep: {
        type: Number,
        default: 0,
        description: '档内行情播放到第几个'
      },
      currentTime: {
        type: String,
        default: ''
      }
    },
    computed: {
      style() {
        const length = this.countMax - this.countMin,
          progress = this.count - this.countMin,
          left = progress / length * 100
        return {
          paddingLeft: `${left}%`,
        }
      },
      selectSpeed: {
        get() {
          return this.speed;
        },
        set(val) {
          this.$emit("update:speed", val)
        }
      }
    },
    watch: {
      count(val) {
        let currentTime = this.formatTag(val)
        this.$emit("update:currentTime", currentTime)
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },  
    methods: {
      disabledDate(current) {
        return current.day() == 6 || current.day() == 0;
      },
      startPlayOrPause() {
        this.$emit("update:pulse", !this.pulse)
        this.btnPlayOrPause = !this.pulse ? ['fas', 'pause'] : ['fas', 'play']
        !this.pulse ? this.play() : this.pause()
        eventBus.$emit('pulseOn', !this.pulse)
      },
      play() {
        let that = this
        that.timer = setInterval(() => {
          that.count += 1;
          if (that.count > that.countMax) {
            that.count = 0;
            this.startPlayOrPause()
          }
        }, this.speed);
      },
      pause() {
        clearInterval(this.timer);
      },
      guideMarks (min, max) {
          const marks = {}
          for (let i = 0; i <= 480; i++) {
              if ((i === min && i % 60 !== 0 && i > 59)) {
                let startTime = this.countMin === 0 ? this.time[i / 60] : this.formatTag(this.countMin)
                marks[i] = {
                  style: {
                    color: '#000'
                    },
                  label: this.$createElement('div', { class: 'marks' }, [
                    this.$createElement('div', '|'),
                    this.$createElement('div', { class: 'marks-line' }, '|'),
                    this.$createElement('div', { class: 'marks-line2' }, '|'),
                    this.$createElement('div', { class: 'marks-value' }, startTime)
                  ])
                }
              } else if ((i === max && i % 60 !== 0 && i > 59)) {
                let startTime = this.countMax === 480 ? this.time[i / 60] : this.formatTag(this.countMax)
                marks[i] = {
                  style: {
                    color: '#000'
                    },
                  label: this.$createElement('div', { class: 'marks' }, [
                    this.$createElement('div', '|'),
                    this.$createElement('div', { class: 'marks-line' }, '|'),
                    this.$createElement('div', { class: 'marks-line2' }, '|'),
                    this.$createElement('div', { class: 'marks-value' }, startTime)
                  ])
                }
              } else if (i % 60 === 0) {
                if (i === 0) {
                  marks[i] = {
                    style: {
                        color: '#000'
                    },
                    label: this.$createElement('div', { class: 'marks' }, [
                        this.$createElement('div', '|'),
                        this.$createElement('div', { class: 'marks-line' }, '|'),
                        this.$createElement('div', { class: 'marks-line2' }, '|'),
                        this.$createElement('div', { class: 'marks-value0' }, this.time[i / 60])
                    ])
                  }
                } else {
                marks[i] = {
                  style: {
                      color: '#000'
                  },
                  label: this.$createElement('div', { class: 'marks' }, [
                      this.$createElement('div', '|'),
                      this.$createElement('div', { class: 'marks-line' }, '|'),
                      this.$createElement('div', { class: 'marks-line2' }, '|'),
                      this.$createElement('div', { class: 'marks-value' }, this.time[i / 60])
                  ])
                }
              }
            } else if (i % 1 === 0) {
              marks[i] = {
                style: {
                color: '#ccc'
                },
                // label: this.$createElement('span', '|')
                label: this.$createElement('div', { class: 'marks' }, [
                this.$createElement('div', '|'),
                this.$createElement('div', { class: 'marks-line' }, '|')
                ])
              }
            }
          }
          return marks
      },
      formatTag(count) {
        let hour = parseInt(count / 60)
        let min = count - hour * 60
        
        if (min === 0) {
          return this.time[hour]
        } else {
          return this.time[hour].split(':')[0] + ':' +  (min < 10 ? '0' + min : min)
        }
      },
      reformatTag(timer) {
        let time;
        let hour = timer.getHours()
        if (hour == '09') {
          time = this.time.indexOf('09:00 23:00')
        } else {
          time = this.time.indexOf(hour+":00")
        }
        return time * 60 + parseInt(timer.getMinutes())
      },
      handleDateChange(event) {
        this.$emit("update:tradeDate", moment(event).format('YYYYMMDD'))
      },
      changeCurrentTime(count) {
        let currentTime = this.formatTag(count)
        console.log(currentTime)
        this.$emit("silderChange", currentTime)
        this.$emit("update:timeStep", 0)
      },
      timeBackword() {
        if (this.count > 0) {
          if (this.timeStep > 0) {
            this.$emit("update:timeStep", this.timeStep - 1)
            //console.log(this.timeStep)
          } else if (this.timeStep == 0) {
            this.$emit("update:timeStep", 4)
            this.count -= 1
            //console.log(this.count + '$' + this.timeStep)
          }
          let currentTime = this.formatTag(this.count)
          this.$emit('timeBackword', currentTime, this.timeStep)
        }
      },
      timeForward() {
        if (this.count < 480) {
          if (this.timeStep < 4) {
            this.$emit("update:timeStep", this.timeStep + 1)
            //console.log(this.timeStep)
          } else if (this.timeStep == 4) {
            this.$emit("update:timeStep", 0)
            this.count += 1
            //console.log(this.count + '$' + this.timeStep)
          }
          let currentTime = this.formatTag(this.count)
          this.$emit('timeForward', currentTime, this.timeStep)
        }
      },
      startTimeHandler(startTime) {
        if (startTime) {
          this.countMin = this.reformatTag(startTime)
          //this.changeCurrentTime(this.min)
        } else {
          this.countMin = 0
          this.count = 0
        }
        
      },
      endTimeHandler(endTime) {
        if (endTime) {
          this.countMax = this.reformatTag(endTime)
        } else {
          this.countMax = 480
        }
      }
    }
  }
</script>

<style>
  .my-slider__tooltip {
    margin-top: -31px;
    margin-left: 48px;
    text-align: left;
    width: 824px;
  }
  .my-slider__tooltip .my-slider__tooltip-wrapper {
    height: 32px;
    transform: translateX(-50%);
    top: -50%;
  }
  .el-col {
    border-radius: 4px;
    margin: 0 0 0 5px;
  }
  .self_slider {
    width: 880px;
    margin: 10px 5px;
    height: 80px;
  }
  
  .self_slider .el-slider__marks-text span {
      display: inline-block;
      height: 17px !important;
      overflow: hidden;
  }
  .marks {
      text-align: center;
      position: relative;
  }
  .marks-line {
      position: absolute;
      top: -12px;
  }
  .marks-line2 {
      position: absolute;
      top: -24px;
  }
  .marks-value {
      position: absolute;
      /* top: -40px; */
      right: -15px;
  }
  .marks-value0 {
      position: absolute;
      /* top: -40px; */
      right: -15px;
  }
  .self_slider .el-slider__runway {
      height: 0px;
  }
  .self_slider .el-slider__bar {
      top: 8px;
      height: 27px;
  }
  .self_slider .el-slider__button-wrapper {
      top: 22px;
      height: 20px;
  }
  .self_slider .el-slider__button {
      border: none;
      background-color: transparent;
  }
  .self_slider .el-slider__button::after, .self_slider .el-slider__button.dragging::after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: #FF9901;
      top: 7px;
      left: 12px;
  }
  .self_slider  .el-slider__button-wrapper .el-tooltip, .self_slider .el-slider__button-wrapper::after {
      display: block;
  }
  .self_slider  .el-slider__button.hover, .self_slider .el-slider__button.dragging {
      transform: scale(1.0);
  }
  .self_slider .el-slider__input {
      margin-top: 3px;
      width: 50%;
      position: absolute;
      right: 25%;
      top: 170px;
  }
  .self_slider .el-slider__runway.show-input {
      margin-right: 0;
      width: auto;
  }
  .time-select {
    width: 120px !important;
  }
  .el-input--mini, .el-button--mini {
    margin: 5px 0;
  }
  .ant-calendar-picker .ant-calendar-picker-input {
    margin: 5px 0;
      font-size: 12px;
      height: 28px;
      line-height: 28px;
  }
</style>